window.addEventListener('load', () => {
    // 获取放置时间的元素
    // 小时
    const hour = document.querySelector(".hour>span")
    // 分钟
    const minute = document.querySelector(".minute>span")
    // 秒钟
    const second = document.querySelector(".second>span")

    // 获取开启和暂停按钮
    const paused = document.querySelector('.paused')
    const running = document.querySelector(".running")

    // 提示框
    const toast = document.querySelector(".toast")

    // 定义函数，更新时间
    const getTime = () => {
        // 获取当前的时间
        const nowTime = new Date()
        // 获取当前的小时
        const hours = nowTime.getHours() < 10 ? '0' + nowTime.getHours() : nowTime.getHours()
        hour.innerHTML = hours
        // 获取当前的分钟
        const minutes = nowTime.getMinutes() < 10 ? '0' + nowTime.getMinutes() : nowTime.getMinutes()
        minute.innerHTML = minutes
        // 获取当前的秒钟
        const seconds = nowTime.getSeconds() < 10 ? '0' + nowTime.getSeconds() : nowTime.getSeconds()
        second.innerHTML = seconds
    }
    getTime()

    // 定义定时器，更新时间
    let timer = setInterval(function () {
        getTime()
    }, 1000)

    // 定义一个变量，控制定时器是否需要开启
    let flag = false

    let opacity = 0

    // 定义一个函数来弹出提示框
    const showToast = () => {
        // 调出提示框，开启计时器，逐渐显示提示框
        const toastTimer =  setInterval(() => {
            opacity += 0.1
            toast.style.opacity = opacity

            if (opacity >= 1) {
                setTimeout(() => {
                    opacity = 0
                    toast.style.opacity = opacity
                    clearInterval(toastTimer)
                },1500)
            }
        }, 30)
    }

    // 做开启和暂停
    // 暂停
    paused.addEventListener("click", function () {
        // 调用提示框
        toast.innerHTML = '时钟已暂停'
        showToast()

        // 点击暂停，清除定时器
        clearInterval(timer)
        flag = true
    })

    // 开启
    // 解决 bug，点击多次开启，就无法暂停，这是因为点击一次开启就启动一个计时器，当点击多次之后，点击暂停就无法找哪一个了
    // 解决思路：定义一个变量来判断定时器是否需要开启
    running.addEventListener("click", function () {
        if (flag) {
            // 开启提示框
            toast.innerHTML = '时钟已开启~'
            showToast()

            // 点击重新开启一个定时器
            timer = setInterval(function () {
                getTime()
            }, 1000)
            flag = false
        }else {
            toast.innerHTML = '时钟已启动，无需反复点击'
            showToast()
        }
    })
})
